<template>
  <el-dialog
    top="30px"
    width="842px"
    title="公示打印"
    :close-on-click-modal="false"
    :before-close="beforeClose"
    :visible.sync="visible"
  >
    <div class="border" :id="printId">
      <div class="p-3">
        <h2 class="text-center my-5">贷款公示</h2>

        <p style="text-indent: 2rem">
          <span>
            为确保贷款资金安全，按照普惠金融要求，现对已完成前期调查的贷款项目做贷前公示，公示期为3天，若有问题，请联系电话：
          </span>
          <span>{{ phoneNumber }}</span>
          <span>，公示项目如下表所示：</span>
        </p>

        <div style="min-height: 300px">
          <table class="table table-bordered">
            <thead>
              <tr class="text-center">
                <th>贷款主体</th>
                <th>贷款人</th>
                <th>贷款银行</th>
                <th>贷款年限（年）</th>
                <th>贷款金额（万元）</th>
                <th>贷款用途</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in dataList" :key="index" class="text-center">
                <td>{{ item.customer_name || '-' }}</td>
                <td>{{ item.corp_name || item.corp_name }}</td>
                <td>{{ item.bank_name }}</td>
                <td>{{ item.load_years }}</td>
                <td>{{ item.approved_funds }}</td>
                <td>{{ item.funds_use_dir }}</td>
              </tr>
            </tbody>
          </table>
        </div>

        <p class="text-right">{{ user.realName }}</p>
        <p class="text-right">{{ publicityDay }}</p>
      </div>
    </div>

    <div class="my-3 text-center">
      <el-button type="primary" icon="el-icon-printer" class="btn-long" @click="handlePrint()">
        打印
      </el-button>
    </div>
  </el-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { printHtml } from '@vimi/utils-tool'

export default {
  components: {},
  props: {
    visible: Boolean,
    dataList: {
      required: true,
    },
    myPublicity: {
      type: Boolean,
      default: false,
    },
    printId: {
      type: String,
      default: 'publicity-print',
    },
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['user']),
    phoneNumber() {
      return this.user.phoneNumber || '0851-86826863'
    },
    publicityDay() {
      return this.$utils.dateFormat(new Date(), 'yyyy年MM月dd日')
    },
    user() {
      return this.$store.getters.user
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    async handlePrint() {
      printHtml(document.getElementById(this.printId).innerHTML)

      if (!this.myPublicity) {
        const data = { public_date: this.$utils.dateFormat(new Date()) }
        const realData = this.dataList.map(item => {
          return { customer_related_id: item.customer_related_id, submit_person: this.user.userId }
        })
        let formData = {
          masterTableInfo: JSON.stringify(data),
          masterTableName: 'datum_customer_public',
          slaveTableInfo: JSON.stringify(realData),
          slaveTableName: 'datum_customer_public_detail',
        }
        const [mres] = await this.$utils.promise(this.$api.relatedBatch('credit', formData))
        if (!mres) {
          this.$message.error('更新公示历史失败，请重新打印！')
        }
      }

      // 更新公示状态、时间
      const updateList = this.dataList
        .filter(item => +item.public_status === 0)
        .map(item => {
          return {
            customer_related_id: item.customer_related_id,
            public_status: 1,
            public_date: this.$utils.dateFormat(new Date()),
          }
        })

      if (!updateList.length) {
        return
      }

      const [res] = await this.$utils.promise(
        this.$api.updateBatch(this.$serviceName, 'customer_related', updateList)
      )
      if (res) {
        return this.$emit('success', res)
      }
      this.$message.error('更新公示信息失败，请重新打印！')
    },
  },
}
</script>
<style lang="scss" scoped></style>
